<template>
    <div>
        <el-card>
            <el-button type="primary" icon="Plus" @click="handelAdd" v-hasButtons="`btn.Trademark.add`">添加品牌</el-button>

            <el-table style="margin: 10px 0" border :data="trademarkInfo">
                <el-table-column prop="id" label="序号" width="80" align="center" type="index" />
                <el-table-column prop="tmName" label="品牌名称" width="180" />
                <el-table-column prop="address" label="品牌LoGo">
                    <template #default="{ row, $index }">
                        <img :src="row.logoUrl" alt="" width="100px" height="100px">
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="品牌操作">
                    <template #default="{ row, $index }">
                        <el-button type="primary" icon="Edit" @click="update(row)"></el-button>

                        <el-popconfirm title="你確定要刪除吗?" @confirm="removeTradeMark(row.id)">
                            <template #reference>
                                <el-button type="primary" icon="Delete"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :background="true"
                layout=" prev, pager, next, jumper, ->,sizes,total" :total="total"
                @current-change="handleCurrentChange" />
        </el-card>

        <el-dialog v-model="dialogVisible" :title="trademarkParams.id ? '修改品牌' : '添加品牌'" width="50%">
            <el-form :model="trademarkParams" :rules="rules" ref="formRef">
                <el-form-item label="品牌名称">
                    <el-input v-model="trademarkParams.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LoGo">
                    <el-upload class="avatar-uploader" :show-file-list="false" action="/api/admin/product/fileUpload"
                        :on-success="handleAvatarSuccess">
                        <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button type="primary" @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue';
import { reqHasTradeMark, reqAddOrUpdateTradeMark, reqDeleteTradeMark } from '@/api/product/trademark'
import type { Records, trademarkResponseData, trademark } from '@/api/product/trademark/type'
import { ElMessage } from 'element-plus';
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const pageNo = ref(1)
const limit = ref(3)
const total = ref(0)
const dialogVisible = ref(false)
const trademarkInfo = ref<Records>([])
const trademarkParams = reactive<trademark>({
    tmName: '',
    logoUrl: ''
})
const formRef = ref()

const getHasTradeMark = async (page = 1) => {
    const res: trademarkResponseData = await reqHasTradeMark(pageNo.value, limit.value)
    if (res.code == 200) {
        total.value = res.data.total
        trademarkInfo.value = res.data.records
    }
}

onMounted(() => {
    getHasTradeMark()
})

const handleCurrentChange = () => {
    getHasTradeMark()
}
const handelAdd = () => {
    dialogVisible.value = true
    trademarkParams.tmName = ""
    trademarkParams.logoUrl = ""
    trademarkParams.id = undefined
}

const update = (row: trademark) => {
    dialogVisible.value = true
    trademarkParams.tmName = row.tmName
    trademarkParams.logoUrl = row.logoUrl
    trademarkParams.id = row.id
}

const cancel = () => {
    dialogVisible.value = false
}

const confirm = async () => {
    await formRef.value.validate()
    const res = await reqAddOrUpdateTradeMark(trademarkParams)
    if (res.code == 200) {
        dialogVisible.value = false
        ElMessage({
            type: 'success',
            message: "success"
        })
        getHasTradeMark(trademarkParams.id ? pageNo.value : 1)
    } else {
        dialogVisible.value = false
        ElMessage({
            type: 'error',
            message: "error"
        })
    }
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    trademarkParams.logoUrl = response.data
}

const rules = {
    tmName: [
        { required: true, trigger: 'blur' }
    ],
    logoUrl: [
        { required: true, trigger: 'change' }
    ]
}

const removeTradeMark = async (id: number) => {
    const res = await reqDeleteTradeMark(id)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: "success"
        })
        getHasTradeMark(trademarkInfo.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
        ElMessage({
            type: 'error',
            message: "error"
        })
    }
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>